<template>

	<view class=" flex relative"  :class="[props.status?'flex-row flex-row-center-center mx-8':'']" >
		<view v-if="!props.status"><slot></slot></view>
		<view v-if="show" :class="[
			(_dot||_count||_icon)&&!props.status?'absolute flex-top-start-end r-0':'',
		]" :style="{zIndex: 10}">
			<tm-sheet
			@click="emits('click',$event)"
			:color="props.color"
			:_class="[customClass,'flex-center flex-col',]"
			:_style="[customCSSStyle,{flexShrink: 1}]"
			:followTheme="props.followTheme"
			:dark="props.dark"
			:round="props.round"
			:shadow="props.shadow"
			:outlined="props.outlined"
			:border="props.border"
			:borderStyle="props.borderStyle"
			:borderDirection="props.borderDirection"
			:text="props.text"
			:transprent="props.transprent"
			:linear="props.linear"
			:linearDeep="props.linearDeep"
			:width="size.w"
			:height="size.h"
			:margin="props.margin"
			:padding="props.padding"
			>
			<tm-text color="white" :font-size="props.fontSize" :_class="size.h==0?'py-3 px-8':''" v-if="_count>0&&!istext" :label="_count>props.maxCount?props.maxCount+'+':_count"></tm-text>
			<tm-text color="white" :font-size="props.fontSize" :_class="size.h==0?'py-3 px-8':''" v-if="_count&&istext" :label="_count"></tm-text>
			<tm-icon color="white" :font-size="props.fontSize" :name="_icon"  v-if="_icon" ></tm-icon>
			</tm-sheet>
		</view>
		<tm-text :font-size="props.fontSize" _class="ml-10" v-if="props.status" :label="props.label"></tm-text>
	</view>
	
</template>

<script lang="ts" setup>
	/**
	 * 徽标
	 * @description 可单独使用，也可使用插槽。
	 * @example <view class="flex-row flex-wrap pa-32" >
			<tm-badge dot color="red">
				<tm-avatar :round="0" label="A"></tm-avatar>
			</tm-badge>
			<tm-badge :count="5"  color="red">
				<tm-avatar label="A"></tm-avatar>
			</tm-badge>
			<tm-badge dot color="red">
				<tm-icon color="primary" name="tmicon-clock-fill"></tm-icon>
			</tm-badge>
			<tm-badge :count="999"  color="red">
				<tm-avatar label="A"></tm-avatar>
			</tm-badge>
			<tm-badge :count="1000"  color="red">
				<tm-avatar label="A"></tm-avatar>
			</tm-badge>
			<tm-badge count="HOT"  color="red">
				<tm-avatar label="A"></tm-avatar>
			</tm-badge>
			<tm-badge icon="tmicon-collection-fill" color="red">
				<tm-avatar label="A"></tm-avatar>
			</tm-badge>
			<tm-badge status dot  label="情况不秒呀." color="green"></tm-badge>
		</view>
	 */
	import { computed, ref, provide, inject , onUpdated, onMounted, onUnmounted, nextTick ,watch, PropType } from 'vue';
	import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs';
	import tmSheet from "../tm-sheet/tm-sheet.vue";
	import tmText from "../tm-text/tm-text.vue";
	import tmIcon from "../tm-icon/tm-icon.vue";
	const emits = defineEmits(["click"])
	const props = defineProps({
		...custom_props,
		round: {
			type: [Number],
			default: 6
		},
		border: {
			type: [Number],
			default: 0
		},
		margin: {
		  type: Array as PropType<Array<number>>,
		  default: () => [0,0],
		},
		padding: {
		  type: Array as PropType<Array<number>>,
		  default: () => [0, 0],
		},
		transprent: {
			type: [Boolean],
			default: false
		},
		label:{
			type:String,
			default:''
		},
		fontSize:{
			type:Number,
			default:22
		},
		//为真时，隐藏插槽数据，展现状态文本模式。
		status:{
			type:[Boolean],
			default:false
		},
		dot:{
			type:[Boolean],
			default:false
		},
		icon:{
			type:[String],
			default:""
		},
		//如果count为数字时，显示数字角标，如果为string是显示文本角标。
		count:{
			type:[Number, String],
			default:0
		},
		maxCount:{
			type:[Number],
			default:999
		},
	})
	//自定义样式：
	const customCSSStyle = computed(()=>computedStyle(props));
	//自定类
	const customClass = computed(()=>computedClass(props));
	//让出多少蹑以显示角标。
	const istext = computed(()=>{
		return isNaN(parseInt(String(props.count)));
	})
	const show = computed(()=>{
		if(!props.dot&&!props.icon&&!props.count) return false
		return true;
	})
	const size = computed(()=>{
		
		if(props.status||props.dot) {
			return {
				w:12,
				h:12,
				pr:6,
				t:3
			};
		}
		if(props.icon){
			let p = props.fontSize*1.6;
			return {
				w:p,
				h:p,
				pr:12,
				t:10
			};
		}
		if(isNaN(parseInt(String(props.count)))){
			return {
				w:0,
				h:0,
				pr:10,
				t:10
			};
		}
		if(props.count<10){
			return {
				w:30,
				h:30,
				pr:12,
				t:10
			};
		}
		if(props.count>=10){
			return {
				w:0,
				h:0,
				pr:10,
				t:10
			};
		}
		return {
				w:0,
				h:0,
				pr:0,
				t:0
			};
		
	})
	const _icon = computed(()=>props.icon)
	const _dot = computed(()=>props.dot)
	const _count = computed(()=>props.count)
</script>

<style scoped>

</style>
